<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>缩略图</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<!--
上一小节，展示的仅只有缩略图的一种使用方式，除了这种方式之外，还可以让缩略图配合标题、描述内容，按钮等：
在仅有缩略图的基础上，添加了一个div名为“caption“的容器，在这个容器中放置其他内容。

比如说:标题，文本描述，按钮等：
-->
<body>
<h1>复杂的缩略图</h1>
<div class="container">
    <div class="row">
		<div class="col-xs-6 col-md-3">
			<a href="#" class="thumbnail">
				<img src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" alt="">
			</a>
			<div class="caption">
				<h3>Bootstrap框架系列教程</h3>
				<p>Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>
				<p>
					<a href="##" class="btn btn-primary">开始学习</a>
					<a href="##" class="btn btn-info">正在学习</a>
				</p>
			</div>  
		</div>
	    <div class="col-xs-6 col-md-3">
	    	<a href="#" class="thumbnail">
		    	<img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
		    </a>
		    <div class="caption">
		    	<h3>Bootstrap框架系列教程</h3>
	    		<p>	Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>
		    	<p>
			    	<a href="##" class="btn btn-primary">开始学习</a>
		    		<a href="##" class="btn btn-info">正在学习</a>
			    </p>
		    </div>   
    	</div>
    	<div class="col-xs-6 col-md-3">
		    <a href="#" class="thumbnail">
			    <img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
		    </a>
		    <div class="caption">
			    <h3>Bootstrap框架系列教程</h3>
				    <p>Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>
				    <p>
				    	<a href="##" class="btn btn-primary">开始学习</a>
				    	<a href="##" class="btn btn-info">正在学习</a>
			    	</p>
		    </div>   
	    </div>
	    <div class="col-xs-6 col-md-3">
	    	<a href="#" class="thumbnail">
			    <img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
		    </a>
		    <div class="caption">
			    <h3>Bootstrap框架系列教程</h3>
		    	<p>Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>
		    	<p>
			    	<a href="##" class="btn btn-primary">开始学习</a>
			    	<a href="##" class="btn btn-info">正在学习</a>
			    </p>
	    	</div>   
	    </div>
	</div>
</div>

<!--下面是代码任务部分--->

<h2>下面是代码任务部分</h2>
<div class="container">
    <div class="row">
    	<div class="col-xs-6 col-md-3">
			<a href="#" class="thumbnail">
				<img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" alt="">
			</a>
			
		</div>
	    <div class="col-xs-6 col-md-3">
	    	<a href="#" class="thumbnail">
		    	<img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
		    </a>
		    
    	</div>
    	<div class="col-xs-6 col-md-3">
		    <a href="#" class="thumbnail">
			    <img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
		    </a>
		    
	    </div>
	    <div class="col-xs-6 col-md-3">
	    	<a href="#" class="thumbnail">
			    <img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
		    </a>
		    
	    </div>
	</div>
</div>
  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
</body>
</html>